<template>
    <el-container class="container">
        <el-header>
            <p-head></p-head>
        </el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>
<script>
    import PHead from '@/base/components/head.vue';
    import utilApi from '@/common/utils';
    export default {
        name:'App',
        components:{
            PHead
        },
        data() {
            return {
                collapsed: false,
                sysUserName: '系统管理员',
                sysUserAvatar: '/static/images/small.jpg',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        handleopen() {
            //console.log('handleopen');
        },
        handleclose() {
            //console.log('handleclose');
        },
        handleselect: function (a, b) {
        },
        //折叠导航栏
        collapse: function () {
            this.collapsed = !this.collapsed;
        },
        showMenu(i, status){
            this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
        }

    },
    created() {
        console.log(this.$router.options.routes)
    }
    }
</script>

<style>
.el-container{
  position: absolute; 
  width: 100%; 
  top: 0px ; 
  left: 0 ; 
  bottom: 0;
}
.el-header{
  background-color: b3c0d1;
  padding: 0;
  z-index: 1000;
}

.el-header .fr{
  float: right;
}
.el-header .el-menu{
  border-bottom: none;
}
.el-aside, .el-main{
  padding-top: 60px;
}
.el-aside{
  background: 545c64;
}
.el-aside .el-menu{
  border-right: none;
}
</style>